<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script>
			function showSpan(){
				let s=document.getElementById("s");
				s.parentNode.style.border="4px groove red";
				console.dir(s.previousSibling);
				//s.previousSibling.previousSibling.innerText="京东";
				s.previousElementSibling.innerText="京东";
				s.nextElementSibling.innerHTML="自渡";
			}
				
			function showUL(){
				let ar=document.querySelector("ul").childNodes;
				alert(ar.length);
				let a2=document.querySelector("ul").children;
				alert(a2.length);
				document.querySelector("ul").lastElementChild.innerHTML="你好";
			}
		</script>
	</head>
	<body>
		<div>
			<p>
				<a href="#">淘宝</a>
				<span id="s">中间元素</span>
				<a href="#">Baidu</a>
			</p>
			<ul>
				<li>111</li>
				<li>222</li>
				<li>33</li>
				<li>555</li>
			</ul>
		</div>
		<p>
			<button onclick="showSpan()">通过span获得其他元素</button>
		<button onclick="showUL()">通过UL获得元素</button>
		
		</p>
	</body>
</html>